{extend name="layout" /}

{block name="title"}
<title>自定义模板(重要) - thinkPHP极速后台开发</title>
<meta name="title" content="自定义模板(重要) - thinkPHP极速后台开发">
<meta name="keywords" content="自定义模板(重要),php,后台开发包，thinkphp、easyadmin、admin,easy,thinkeasyadmin">
<meta name="description" content="自定义模板(重要);通过重写或者指定模板的方式实现自己的模板布局和样式;easyadmin灵活可定制的thinkphp的后台开发工具包,助你快速开发后台">
{/block}

{block name="main"}

<ul class="right-menu">
    <li><a href="#list" class="active">列表页</a></li>
    <li><a href="#form">添加修改页</a></li>
    <li><a href="#show">详情页</a></li>
    <li><a href="#field">字段</a></li>
    <li><a href="#btn">按钮</a></li>
    <li><a href="#page">分页</a></li>
    <li><a href="#filter">过滤器</a></li>
    <li><a href="#breadcrumb">面包屑</a></li>
    <li><a href="#rewrite">重写模板</a></li>
    <li><a href="#rewrite_list">可重写模板列表</a></li>
    <li><a href="#file_find">文件查找规则</a></li>
</ul>

<fieldset id="join" class="layui-elem-field">
    <legend>自定义模板</legend>
    <div class="layui-field-box">
        <h2>自定义模板的2种方式</h2>
        <ul>
            <li>1. 指定模板 <small>比较灵活,每个页面的不同元素都可以自定义实现</small></li>
            <li>2. 重写模板 <small>一次实现,全局通用</small></li>
        </ul>
        <br>
        <blockquote class="layui-elem-quote">
            通过重写可用很简单的实现自己的模板布局,样式等等. <br>
            多样化的场景中,我们通过快速简单的配置实现80%重复的劳作,一些多样化的业务,可能就会用到这块的内容.
        </blockquote>

        <fieldset class="layui-elem-field layui-field-title" id="list">
            <legend>列表页</legend>
            <div class="layui-field-box">
                <p>列表页指定模板</p>
                <pre class="php">
#project\app\admin\controller\Category.php

namespace app\admin\controller;
use easyadmin\app\libs\PageList;

class Category extends \easyadmin\controller\Admin
{
    /**
     * 定义列表
     * @param PageList $page
     */
    protected function configList(PageList $page)
    {
        # 指定模板
        $page->setTemplate('test:test1');
    }
}
                </pre>
            </div>
        </fieldset>

        <fieldset class="layui-elem-field layui-field-title" id="form">
            <legend>添加修改页</legend>
            <div class="layui-field-box">
                <p>添加修改页指定模板</p>
                <pre class="php">
#project\app\admin\controller\Category.php

namespace app\admin\controller;
use easyadmin\app\libs\PageForm;

class Category extends \easyadmin\controller\Admin
{
    protected function configFormField(PageForm $page)
    {
        # 指定模板
        $page->setTemplate('test:test1');
    }
}
                </pre>
            </div>
        </fieldset>

        <fieldset class="layui-elem-field layui-field-title" id="show">
            <legend>详情页</legend>
            <div class="layui-field-box">
                <p>详情页指定模板</p>
                <pre class="php">
#project\app\admin\controller\Category.php

namespace app\admin\controller;
use easyadmin\app\libs\PageShow;

class Category extends \easyadmin\controller\Admin
{
    protected function configShow(PageShow $page)
    {
        $page->setTemplate('test:test1');
    }
}
                </pre>
            </div>
        </fieldset>

        <fieldset class="layui-elem-field layui-field-title" id="field">
            <legend>字段</legend>
            <div class="layui-field-box">
                <p>字段指定模板,只需要在添加字段的时候 指定<code>template</code>属性</p>
                <pre class="php">
# 添加列表,表单,详情字段的时候
->addField('id', 'ID', ListText::class [
    //会查找 project\app\admin\views\test\btn.html 文件 进行渲染按钮
    'template'=>'test:test1'
]);

#添加过滤器字段的时候
->addFilter('name', '名称', FormText::class, [
    //会查找 project\app\admin\views\test\btn.html 文件 进行渲染按钮
    'template'=>'test:test1'
]);
                </pre>
            </div>
        </fieldset>

        <fieldset class="layui-elem-field layui-field-title" id="btn">
            <legend>按钮</legend>
            <div class="layui-field-box">
                <p>按钮指定模板</p>
                <pre class="php">
# 实例化方式指定模板
$btn = new Btn();
$btn->setTemplate('test:test1');

#列表, 表单, 详情等页面 添加按钮方式指定模板
->addAction('按钮名称', 'url', [
    //会查找 project\app\admin\views\test\btn.html 文件 进行渲染按钮
    'template'=>'test:btn'
]);
                </pre>
            </div>
        </fieldset>

        <fieldset class="layui-elem-field layui-field-title" id="page">
            <legend>分页</legend>
            <div class="layui-field-box">
                <p>分页指定模板</p>
                <pre class="php">
#project\app\admin\controller\Category.php

namespace app\admin\controller;
use easyadmin\app\libs\PageList;

class Category extends \easyadmin\controller\Admin
{
    /**
     * 定义列表
     * @param PageList $page
     */
    protected function configList(PageList $page)
    {
        # 指定分页的模板
        $page->getPage()->setTemplate('test:test1');
    }
}
                </pre>
            </div>
        </fieldset>

        <fieldset class="layui-elem-field layui-field-title" id="filter">
            <legend>过滤器</legend>
            <div class="layui-field-box">
                <p>过滤器指定模板</p>
                <pre class="php">
#project\app\admin\controller\Category.php

namespace app\admin\controller;
use easyadmin\app\libs\ListFilter;


class Category extends \easyadmin\controller\Admin
{

    protected function configListFilter(ListFilter $filter)
    {
        # 过滤器整个容器指定模板
        $filter->setTemplate('test:test1');

        # 过滤器字段指定模板
        $filter->addFilter('name', '名称', FormText::class, [
            //会查找 project\app\admin\views\test\btn.html 文件 进行渲染按钮
            'template'=>'test:test1'
        ]);
    }

}
                </pre>
            </div>
        </fieldset>

        <fieldset class="layui-elem-field layui-field-title" id="breadcrumb">
            <legend>面包屑</legend>
            <div class="layui-field-box">
                <p>面包屑指定模板</p>
                <pre class="php">
#project\app\admin\controller\Category.php

namespace app\admin\controller;
use easyadmin\app\libs\PageList;
use easyadmin\app\libs\PageForm;
use easyadmin\app\libs\PageShow;

class Category extends \easyadmin\controller\Admin
{
    /**
     * 定义列表 , 指定列表页面的面包屑模板
     * @param PageList $page
     */
    protected function configList(PageList $page)
    {
        $page->getBreadcrumb()->setTemplate('test:test1');
    }

    /**
     * 配置表单 , 指定表单页面的面包屑模板
     * @param PageForm $page
     */
    protected function configFormField(PageForm $page)
    {
        $page->getBreadcrumb()->setTemplate('test:test1');
    }

    /**
     * 查看详情配置 , 指定详情页面的面包屑模板
     * @param PageShow $page
     */
    protected function configShow(PageShow $page)
    {
        $page->getBreadcrumb()->setTemplate('test:test1');
    }

}
                </pre>
            </div>
        </fieldset>

        <fieldset class="layui-elem-field layui-field-title" id="rewrite">
            <legend>重写模板</legend>
            <div class="layui-field-box">
                <p>所有模板都是可以通过继承重写的; 只需要路径一一对应即可;</p>
                <p>例如要重写过滤器 ( filter.html ) 模板; 只需要新建 <code>project\app\admin\views\list\filters.html</code>
                    文件,然后根据重写规则实现直接的模板即可;</p>

                <img src="/doc_img/rewrite.png" style="min-width: 300px;max-width: 600px" alt="重写说明">
                <blockquote class="layui-elem-quote">
                    想要重写谁,就复制谁
                </blockquote>
                <pre class="php">{literal}#project\app\admin\views\list\filters.html

# 1.继承原有逻辑 进行扩展
{extend name="@list:filters" /}

{block name="main"}

    #原来逻辑之前实现自己的逻辑

    # {__block__} 标签会继承原有逻辑
    {__block__}


    #原来逻辑之后实现自己的逻辑

{/block}

{block name="style"}{/block}
{block name="js"}{/block}

#------------------------------------
# 2.完全自己实现过滤器
# 新建一个空白页面,直接实现逻辑就好了

{/literal}</pre>
            </div>
        </fieldset>


        <fieldset class="layui-elem-field layui-field-title" id="rewrite_list">
            <legend>可重写模板列表</legend>
            <div class="layui-field-box">
                <blockquote class="layui-elem-quote">
                    在您的项目中,<code>project\app\admin\views\</code> 目录下,按照这个结果一一对应 即可实现模板重写,达到自定义模板的效果
                </blockquote>
                <div id="rewrite_list_content"></div>
            </div>
        </fieldset>

        <fieldset class="layui-elem-field layui-field-title" id="file_find">
            <legend>文件查找规则</legend>
            <div class="layui-field-box">
                <h2>1. 指定模板方式</h2>
                <p>用法同 <a target="_blank"
                          href="https://www.kancloud.cn/manual/think-template/1286403">thinkphp-template</a> 模板引擎</p>
                <p>默认情况下,会在当前模块下面的<code>views</code>目录中查找</p>
                <p>如果修改了 template 模板引擎配置, 则根据自己的配置规则进行查找</p>
                <br>
                <h2>2. 模板继承</h2>
                <p>模板继承,需要 当前模块的<code>views</code>目录和<code>thinkeasyadmin\src\app\views\</code>目录一一对应</p>
                <p>系统优先查找模块下的<code>views</code>目录,再查找<code>thinkeasyadmin\src\app\views\</code>目录</p>
                <p><code>@</code>符号说明: @符号会替换成<code>thinkeasyadmin\src\app\views\</code></p>
                <p><code>@list:filters</code>最终结果是 thinkeasyadmin\src\app\views\list:filters.html</p>
            </div>
        </fieldset>

    </div>
</fieldset>


{/block}

{block name="body_js"}
<script>
    layui.use('tree', function () {
        var tree = layui.tree;

        tree.render({
            elem: '#rewrite_list_content',  //绑定元素
            onlyIconControl: true
            , data: [{
                title: 'views',
                spread: true,
                children: [
                    {
                        title: 'form',
                        spread: true,
                        children: [
                            {
                                title: 'field',
                                children: [
                                    {title: 'autocomplete.html'},
                                    {title: 'checkbox.html'},
                                    {title: 'datetime.html'},
                                    {title: 'editor.html'},
                                    {title: 'hidden.html'},
                                    {title: 'radio.html'},
                                    {title: 'select.html'},
                                    {title: 'switch.html'},
                                    {title: 'text.html'},
                                    {title: 'text.html'},
                                    {title: 'textarea.html'},
                                    {title: 'upload.html'},
                                ]
                            },
                            {title: 'form.html'},
                        ]
                    },
                    {
                        title: 'list',
                        spread: true,
                        children: [
                            {
                                title: 'field',
                                children: [
                                    {title: 'image.html'},
                                    {title: 'select.html'},
                                    {title: 'switch.html'},
                                    {title: 'text.html'},
                                ]
                            },
                            {title: 'filters.html'},
                            {title: 'list.html'},
                            {title: 'page.html'},
                        ]
                    },
                    {
                        title: 'public',
                        spread: true,
                        children: [
                            {title: 'actions.html'},
                            {title: 'breadcrumb.html'},
                            {title: 'btn.html'},
                            {title: 'menu.html'},
                        ]
                    },
                    {
                        title: 'show',
                        spread: true,
                        children: [
                            {title: 'show.html'},
                        ]
                    },
                    {title: 'layout.html'},

                ]
            }]
        });
    });
</script>
{/block}
